<script setup lang="ts">
defineOptions({
  name: 'policiesIndex'
});
import { usePaging } from "@/hooks/pagination";
import { getPoliciesList } from "@/api/policies";
import type { Policies } from '@/types/policies'
import { useDetail } from "@/hooks/detail";
import { useDict } from "@/hooks/dict";
const { enterprise_zone: enterpriseZone } = useDict('enterprise_zone')
const { navDetail } = useDetail()
const { queryParams, setQueryParms, total, loadData } = usePaging();
setQueryParms({
  articleType: "1"
})
const activeName = ref('1');
const policiesList = ref<Policies[]>()

function getData() {
  loadData(getPoliciesList).then(res => {
    policiesList.value = res.rows
  })
}
onMounted(() => {
  getData()
})

function handleClick(tab: string) {
  console.log(activeName.value);
  queryParams.articleType = activeName.value
  getData()
}
</script>
<template>
  <div>
    <div class="w-1200 m-auto">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane v-for="(item, i) in enterpriseZone" :key="i" :label="item.label" :name="item.value" />
      </el-tabs>
      <div class="consult-content grid grid-cols-2 gap-4 mt-4">
        <div class="consult-content-x flex flex-col" v-for="(item, i) in policiesList" :key="i"
          @click="navDetail(item.id, '3')">
          <h2 class="text-4.5 ">{{ item.title }}</h2>
          <div class="col9 text-3 mt-auto">
            <span style="padding-right: 30px;">阅读量：{{ item.viewCount }}</span>
            <span class="inline-block float-right" style="margin-left: auto;">时间：{{ item.createTime }} </span>
          </div>
        </div>
      </div>

      <div class="mt-15 mb-20 flex justify-center">
        <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.pageNum"
          @change="getData" v-model:page-size="queryParams.pageSize" :total="total" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.consult-content-x {
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 81, 255, .1);
  height: 140px;
  padding: 20px;
  cursor: pointer;

  p,
  h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}
</style>
